<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <template>
      <div class="bread">
        <div class="container">
          <span class="text fl"> 您的当前位置：</span>
          <el-breadcrumb class="fl" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>关于juju</el-breadcrumb-item>
            <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </template>
    <!-- 列表 -->
    <div class="list_news news_detail01 p7090">
      <div class="container">
        <div class="row content pr overhide">
          <div class="fl left c_left">
            <ul>
              <li>关于juju</li>
              <li>
                <router-link to="/aboutus" class="bl">公司简介</router-link>
              </li>
              <li class="active">
                <router-link to="/newslist" class="bl">新闻中心</router-link>
              </li>
              <li>
                <router-link to="/contact" class="bl">联系我们</router-link>
              </li>
            </ul>
          </div>
          <div class="fr right c_center">
            <div>
              <div class="top">新闻中心</div>
              <ul>
                <li v-for="item in userList" :key="item.id">
                  <router-link
                    :to="{ path: '/newsshow', query: { id: item.id } }"
                    class="bl name"
                    >{{ item.title }}</router-link
                  >
                  <div class="data">{{ item.create_time }}<span></span></div>
                </li>
              </ul>

              <div class="ta mb40">
                <el-pagination
                  layout="  prev, pager, next "
                  :page-size="page_size"
                  @current-change="current_change"
                  :current-page.sync="currentPage"
                  :pager-count="5"
                  :total="info.total"
                  v-if="info.pages > 1"
                  @click="current_change(currentPage)"
                >
                </el-pagination>
                <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBread from "../../websitecom/Bread.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
  },
  data() {
    return {
      userList: [],
      info: [], //数据
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
  mounted() {
    this.getAllList();
  },
  methods: {
    getAllList(type) {
      var that = this;
      if (!type) {
        type = that.type;
      } else {
        that.type = type;
      }

      this.$axios
        .get(
          this.$api +
            "//api/news/index?page_no=" +
            this.currentPage +
            "&page_size=" +
            this.page_size +
            "&sort=publish_time&order=desc"
        )
        .then(function (response) {
          that.userList = response.data.data.data;
          that.info = response.data.data.page;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },

    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllList();
    },
  },
};
</script>

<style >
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.list_team ul .activity {
  margin-bottom: 2.125rem;
}
</style>

<style lang="less" scoped>
.mb40 {
  margin: 0 0 50px 0;
}
.list_news {
  .right {
    > div {
      .top {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 3.4375rem;
        color: #000000;
        padding: 0 2rem;
        border-bottom: solid 1px #e5e5e5;
      }

      .text {
        padding: 2.1875rem 2rem 2.8125rem;

        p {
          font-size: 1.125rem;
          line-height: 1.875rem;
          margin-top: 2.1875rem;
          color: #19a15f;

          span {
            color: #de5044;
          }
        }

        .tips {
          color: #de5044;
        }
      }

      ul {
        padding: 2rem 2rem 4.375rem;

        li {
          padding: 0.9375rem 0;
          border-bottom: 1px solid #ebebeb;

          .name {
            font-size: 1rem;
            line-height: 2.0625rem;
            color: #5793f5;
          }

          .data {
            font-size: 0.875rem;
            line-height: 1.875rem;
            color: #7f7f7f;

            span {
              margin-left: 1.25rem;
            }
          }
        }

        li:hover {
          .name {
            transform: translateX(10px);
            transition: all 0.4s;
            -webkit-transform: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
          }
        }

        li:nth-child(1) {
          padding-top: 0;
        }
      }
    }

    .col-md-4 .text {
      padding-left: 0;
      padding-bottom: 0.625rem;
    }
  }

  .more {
    background-color: #19a15f;
    margin: 1.875rem 0;
    border: 1px solid #19a15f;
  }

  .more:hover {
    background: #fff;

    a {
      color: #19a15f;
    }
  }
}
</style>
